<template>
	<view :class="AppStyle">
		<view class="my-topbg">
			<view class="user-card">
				<view class="my-top" v-if="UserInfo!==''">
					<view bindtap="toHome" class="my-head">
						<image mode="aspectFill"
							:src="UserInfo.avatarUrl?UserInfo.avatarUrl:require('@/static/img/user.png')"></image>
					</view>
					<view class="my-top-cell">
						<view class="my-name">
							<view class="name">{{UserInfo.nickName}}</view>
							<view class="pag">{{UserInfo.subTitle}}</view>
						</view>
						<view class="my-post">
							{{UserInfo.description?UserInfo.description:'这个人很懒什么都没写'}}
						</view>
					</view>
					<!-- <view @tap="goMyEdit" class="pick-code">
						<i class="zi zi_edit"></i>
						编辑资料
					</view> -->
				</view>
				<view @tap="toLogin" class="my-top" v-else>
					<view class="my-top-cell">
						<view class="my-name">
							<view class="name">点击登录（跳转到login页面）</view>
						</view>
						<view class="my-post">
							暂无
						</view>
					</view>
					<view class="my-head">
						<image mode="aspectFill" src="@/static/img/user.png"></image>
					</view>
				</view>
				<view class="my-other">
					<view class="my-hbox">
						<view class="item">
							<view @tap="toFavs" class="item-box">
								<view class="cell">
									<view class="num">{{account.favs?account.favs:0}}</view>
									<view class="name">收藏</view>
								</view>
							</view>
						</view>
						<view class="item">
							<view @tap="toLikes" class="item-box">
								<view class="cell">
									<view class="num">{{account.likes?account.likes:0}}</view>
									<view class="name">点赞</view>
								</view>
							</view>
						</view>
						<view class="item">
							<view @tap="toComment" class="item-box">
								<view class="cell">
									<view class="num">{{account.comments?account.comments:0}}</view>
									<view class="name">评论</view>
								</view>
							</view>
						</view>
						<!-- <view class="item">
							<view @tap="toUserPoints" class="item-box">
								<view class="cell">
									<view class="num">{{credit.credits?credit.credits:0}}</view>
									<view class="name">积分</view>
								</view>
							</view>
						</view> -->
					</view>
				</view>
			</view>
		</view>

		<view class="fix-card">
			<view class="fix-header">
				<view class="name">常用功能</view>
				<view bindtap="toOrder" class="actions">
				</view>
			</view>
			<view class="fix-content">
				<view class="flex-wrp">
					<view @tap="toUserMessage" class="flex-item t-item">
						<image src="@/static/img/icon1.png"></image>
						<text>消息</text>
					</view>
					<view @tap="toQuanZi" class="flex-item t-item">
						<image src="@/static/img/icon3.png"></image>
						<text>圈子</text>
					</view>
					<!-- #ifdef APP-PLUS||H5 -->
					<view @tap="toContact" class="flex-item t-item">
						<image src="@/static/img/icon2.png"></image>
						<text>客服</text>
					</view>
					<!-- #endif -->
					<!-- #ifdef MP -->
					<view class="flex-item t-item">
						<button class="contact" type="default" open-type="contact"></button>
						<image src="@/static/img/icon2.png"></image>
						<text>客服</text>
					</view>
					<!-- #endif -->
					<view @tap="gotoAbout" class="flex-item t-item">
						<image src="@/static/img/icon4.png"></image>
						<text>关于</text>
					</view>
				</view>
			</view>
		</view>

		<view class="fix-card">
			<view class="flex-wrp flex-other">
				<view @tap="toSetting" class="flex-item">
					<text>个人信息设置</text>
					<view class="value"></view>
					<image src="@/static/img/icon-link.png"></image>
				</view>
			</view>
		</view>


		<view class="fix-card">
			<view class="flex-wrp flex-other">
				<view @tap="gotoFeedBack" class="flex-item">
					<text>我要反馈</text>
					<view class="value">给我们提个意见或建议</view>
					<image src="@/static/img/icon-link.png"></image>
				</view>
				<view @tap="goAgreement" class="flex-item">
					<text>隐私政策/用户协议</text>
					<view class="value">隐私政策</view>
					<image src="@/static/img/icon-link.png"></image>
				</view>
				<view @tap="gotoVersion" class="flex-item" data-type="投诉">
					<text>版本说明</text>
					<view class="value">版本说明</view>
					<image src="@/static/img/icon-link.png"></image>
				</view>
				<!-- <view @tap="bindLogout" class="flex-item" data-type="意见">
					<text>清除缓存</text>
					<view class="value">清除缓存</view>
					<image src="@/static/img/icon-link.png"></image>
				</view> -->
			</view>
		</view>

		<view class="copyright-footer">
			<image src=""></image>
			<view class="text" v-if="company_title">{{company_title}}</view>
			<view class="text">帝眼未来科技平台技术支持</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				AppStyle: '',
				UserInfo: '',
				account: '',
				credit: '',
				company_title: 'TopTop小程序',
				appVersion: 'V 1.20'
			}
		},
		methods: {
			goMyEdit() {

			},
			toLogin() {
				this.UserInfo = {
					'subTitle': '普通会员',
					'avatarUrl': 'https://www.imahui.com/wp-content/plugins/wp-applets/static/image/logo.png',
					'nickName': '超级无敌可耐到死',
					'description': '操蛋的人生从来不缺席'
				}
				this.account = {
					'favs': 1,
					'likes': 12,
					'comments': 3,
				}
			},
			toFavs() {
				uni.showToast({
					title: '功能暂未开放！',
					duration: 1000,
					icon: 'error',
					position: ''
				})
			},
			toQuanZi() {
				uni.showToast({
					title: '功能暂未开放！',
					duration: 1000,
					icon: 'error',
					position: ''
				})
			},
			toUserMessage() {
				uni.navigateTo({
					url: '/pages/user/message'
				});
			},
			toLikes() {
				uni.navigateTo({
					url: '/pages/user/likeMsg'
				});
			},
			toComment() {
				uni.navigateTo({
					url: '/pages/user/replyMsg'
				});
			},
			toSetting() {
				uni.navigateTo({
					url: '/pages/user/setting'
				});
			},
			goAgreement() {
				uni.navigateTo({
					url: '/pages/user/agreement'
				});
			},
			gotoAbout() {
				uni.navigateTo({
					url: '/pages/user/about'
				});
			},
			gotoVersion() {
				uni.showToast({
					title: this.appVersion,
					duration: 1000,
					icon: 'none',
					position: ''
				})
			},
			gotoFeedBack() {
				uni.navigateTo({
					url: '/pages/feedback/feedBackList'
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	.my-topbg {
		position: relative;
		background: linear-gradient(136deg, #FDBC24, #FDD734);
		padding-bottom: 140rpx;
		margin-bottom: -140rpx;

		.my-top {
			padding: 110rpx 0 40rpx 35rpx;
			margin-bottom: 20rpx;
			position: relative;
			display: flex;
			align-items: center;

			.my-head {
				margin-right: 30rpx;
				position: relative;
				display: flex;
				align-items: center;

				image {
					width: 102rpx;
					height: 102rpx;
					border-radius: 999rem;
					overflow: hidden;
				}
			}

			.pick-code {
				height: 60rpx;
				text-align: center;
				position: relative;
				width: 171rpx;
				background: linear-gradient(311deg, #55aa7f, #5fbf8e);
				font-size: 26rpx;
				color: #f7fffe;
				line-height: 60rpx;
				box-sizing: border-box;
				border-radius: 999rem;
				margin-right: 20rpx;

			}

			.my-top-cell {
				flex: 1;
				overflow: hidden;
				white-space: nowrap;

				.my-name {
					font-size: 42rpx;
					color: #333;
					line-height: 60rpx;
					font-weight: 700;
					display: flex;
					align-items: center;

					.name {
						overflow: hidden;
						white-space: nowrap;
						margin-right: 7rpx;
						width: 300rpx;
						overflow: hidden;
						text-overflow: ellipsis;

					}

					.pag {
						height: 33rpx;
						background: linear-gradient(293deg, #37e2ca, #06d58b);
						border-radius: 4rpx;
						padding: 0 8rpx;
						margin-left: 12rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						margin-right: 8rpx;
						line-height: 33rpx;
						font-size: 24rpx;
						color: #fff;
						font-weight: 400;
					}
				}


				.my-post {
					display: flex;
					align-items: center;

					.tag {
						background: #fba117;
						border-radius: 4rpx;
						font-size: 22rpx;
						color: #fff;
						padding: 0 10rpx;
						line-height: 32rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-right: 20rpx;

					}
				}
			}
		}

		.my-other {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.my-hbox {
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				flex: 1;

				.item {
					position: relative;
					flex: 1;

					.item-box {
						height: 118rpx;
						border-radius: 10rpx;
						display: flex;
						align-items: center;

						.cell {
							flex: 1;
							text-align: center;

							.num {
								font-size: 38rpx;
								color: #333;
								font-family: DINAlternate-Bold, DINAlternate;
								font-weight: 700;
								white-space: nowrap;
								text-overflow: ellipsis;
							}

							.name {
								font-size: 24rpx;
								color: #a0acaa;
								margin-top: 7rpx;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
						}
					}
				}
			}
		}


	}


	.fix-card {
		position: relative;
		background: #fff;
		border-radius: 20rpx;
		margin: 20rpx;

		.fix-header {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx 32rpx 0;

			.name {
				font-size: 32rpx;
				color: #384645;
				font-weight: 700;
			}

			.actions {
				font-size: 26rpx;
				color: #a0acaa;
				display: flex;
				align-items: center;

				image {
					width: 20rpx;
					height: 20rpx;
				}
			}
		}

		.flex-wrp {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding: 10rpx 0 20rpx;

			.t-item {

				position: relative;
				text-align: center;
				width: 25%;
				padding: 30rpx 0;

				image {
					width: 56rpx;
					height: 56rpx;
					display: block;
					margin: 0 auto;
				}

				text {
					font-size: 26rpx;
					color: #333;
					margin-top: 20rpx;
					display: block;
				}

				.contact {
					position: absolute;
					width: 100%;
					height: 120rpx;
					top: 0;
					left: 0;
					opacity: 0;
				}
			}
		}

		.flex-other {
			flex-direction: column;
			padding: 0;
			display: flex;
			align-items: center;

			.flex-item {
				position: relative;
				padding: 34rpx 26rpx;
				width: 100%;
				box-sizing: border-box;
				line-height: 42rpx;
				display: flex;
				align-items: center;

				text {
					font-size: 30rpx;
					color: #333837;
				}

				.value {
					font-size: 26rpx;
					color: #a0acaa;
					margin-left: auto;
				}


				image {
					width: 24rpx;
					height: 24rpx;
					margin-left: 8rpx;
				}
			}
		}
	}


	.copyright-footer {
		text-align: center;
		font-size: 24rpx;
		color: #b6b9bb;
		padding: 40rpx 0;
		line-height: 36rpx;

		image {
			width: 60rpx;
			height: 60rpx;
			display: block;
			margin: 0 auto 8rpx;
		}
	}
</style>